<template>
	<div class="home">
		<header-cont :page="loginstatus=='unlogin'?'':'login'"></header-cont>
		<div class="main">
            <div class="main_right">
                <div class="main_right_cont main_right_cont_login" v-if="loginstatus=='unlogin'">
                    <div class="login_header">
                        <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
							<a-tabs
								:activeKey="customActiveKey"
								:tabBarStyle="{ textAlign: 'center'}"
								class="main_tabs expert_tab"
								@change="handleTabClick">
								<a-tab-pane key="tab1" tab="专家登录">
									<div name="短信登录" lable="短信登录" v-if="loginType==='phone'">
										<a-form-item>
											<a-input
												v-decorator="['mobile',validatorRules.mobile]"
												size="large"
												type="text"
												placeholder="手机号">
												<a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
											</a-input>
										</a-form-item>
										<a-row :gutter="0">
										<a-col :span="16">
											<a-form-item>
												<a-input
													v-decorator="['inputCode',validatorRules.inputCode]"
													size="large"
													type="text"
													@change="inputCodeChange"
													placeholder="请输入验证码">
													<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
												</a-input>
											</a-form-item>
										</a-col>
										<a-col :span="8" style="text-align: right">
											<img v-if="requestCodeSuccess" class="codeimg" style="width:100%;cursor:pointer;" :src="randCodeImage" @click="handleChangeCheckCode"/>
											<img v-else  class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode"/>
										</a-col>
										</a-row>
										<!-- <a-row :gutter="0">
										<a-col class="gutter-row" :span="16"> -->
											<a-form-item style="position:relative;">
												<a-input
													v-decorator="['captcha',validatorRules.captcha]"
													size="large"
													type="text"
													placeholder="请输入验证码">
													<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
												</a-input>
												<a-button
												class="getCaptcha"
												tabindex="-1"
												:disabled="state.smsSendBtn"
												@click.stop.prevent="getCaptcha"
												v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
											</a-form-item>
										<a-form-item>
											<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
											<a class="forge-password" style="float: right;" value="账号登录" @click="change1">
												账号登录
											</a>
										</a-form-item>
									</div>
									<div name="账号登录" lable="账号登录" v-else>
										<a-form-item>
											<a-input
												size="large"
												v-decorator="['username_zj',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
												type="text"
												placeholder="请输入帐户名">
												<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
											</a-input>
										</a-form-item>

										<a-form-item>
											<a-input
												v-decorator="['password_zj',validatorRules.password]"
												size="large"
												type="password"
												autocomplete="false"
												placeholder="密码">
												<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
											</a-input>
										</a-form-item>

										<a-row :gutter="0">
											<a-col :span="16">
												<a-form-item>
													<a-input
														v-decorator="['inputCode',validatorRules.inputCode]"
														size="large"
														type="text"
														@change="inputCodeChange"
														placeholder="请输入验证码">
														<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
													</a-input>
												</a-form-item>
											</a-col>
											<a-col :span="8" style="text-align: right">
												<img v-if="requestCodeSuccess"  class="codeimg" :src="randCodeImage" @click="handleChangeCheckCode"/>
												<img v-else  class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode"/>
											</a-col>
										</a-row>

										<a-form-item>
											<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
											<a class="forge-password" style="float: right;" value="短信登录" @click="change1">短信登录</a>
										</a-form-item>
									</div>
								</a-tab-pane>
								<a-tab-pane key="tab2" tab="集团/推荐单位">
									<a-form-item>
										<a-input
										size="large"
										v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
										type="text"
										placeholder="请输入帐户名">
										<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
										</a-input>
									</a-form-item>

									<a-form-item>
										<a-input
										v-decorator="['password',validatorRules.password]"
										size="large"
										type="password"
										autocomplete="false"
										placeholder="密码">
										<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
										</a-input>
									</a-form-item>

									<a-row :gutter="0">
										<a-col :span="16">
										<a-form-item>
											<a-input
											v-decorator="['inputCode',validatorRules.inputCode]"
											size="large"
											type="text"
											@change="inputCodeChange"
											placeholder="请输入验证码">
											<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
											</a-input>
										</a-form-item>
										</a-col>
										<a-col :span="8" style="text-align: right">
										<img v-if="requestCodeSuccess"  class="codeimg" :src="randCodeImage" @click="handleChangeCheckCode"/>
										<img v-else  class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode"/>
										</a-col>
									</a-row>
									<a-form-item>
										<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
									</a-form-item>
								</a-tab-pane>
							</a-tabs>
							<a-form-item>
								<a-button
								size="large"
								type="primary"
								htmlType="submit"
								class="login-button"
								:loading="loginBtn"
								@click.stop.prevent="handleSubmit"
								:disabled="loginBtn">确定
								</a-button>
							</a-form-item>
						</a-form>
                    </div>
                </div>
            </div>
        </div>
        <footer-cont></footer-cont>
    	<login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';

import Vue from 'vue'
import { mapActions } from "vuex"
import { timeFix } from "@/utils/util"
import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
import { putAction,postAction,getAction } from '@/api/manage'
  import LoginSelectTenant from "@/views/user/LoginSelectTenant";
export default {
    components: {
        headerCont,
		LoginSelectTenant,
        footerCont
    },
    mounted() {
		var islogin = sessionStorage.getItem('islogin');
        if (islogin == '1') {
            this.loginstatus = 'login';
            // this.getSysCxjFlCxjsbList();
        } else {
			/* var shenbao_phoneNumber = localStorage.getItem('shenbao_phoneNumber');
			var shenbao_passWord = localStorage.getItem('shenbao_passWord');
			if (shenbao_phoneNumber && shenbao_passWord) {
				this.codephone = shenbao_phoneNumber;
				this.codepwd = shenbao_passWord;
				this.checked = true;
			} */
            this.loginstatus = 'unlogin';
        }
    },
    created () {
		this.currdatetime = new Date().getTime();
		Vue.ls.remove(ACCESS_TOKEN)
		this.getRouterData();
		this.handleChangeCheckCode();
		// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
		//this.getEncrypte();
		// update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
    },
    data() {
        return {
        	form: this.$form.createForm(this),
        	customActiveKey: "tab1",
			validatorRules:{
				username:{rules: [{ required: true, message: '请输入用户名!'},{validator: this.handleUsernameOrEmail}]},
				password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]},
				mobile:{rules: [{validator:this.validateMobile}]},
				captcha:{rule: [{ required: true, message: '请输入验证码!'}]},
				inputCode:{rules: [{ required: true, message: '请输入验证码!'}]}
			},
        	requestCodeSuccess:false,
        	loginType: "username",
			state: {
				time: 60,
				smsSendBtn: false,
			},
			currdatetime:'',
			randCodeImage:'',
        	loginBtn: false,

            loginstatus: 'unlogin',






            // // logintype: true,
            // passtype:'',
            // codetype: '',
            // achievementsFlag: false,
            // dataList: [],
            // zlList: [],
            // key: "",
            // result: '',
            // codephone: '',
            // codepwd: '',
            // reg: /^1[3456789]\d{9}$/,
            // yzmphone: '',
            // gapcode: '',
            // identify: '',
            // cxjsbList: [],
            // fl_bh: '',
            // fl_mc: '',
            // zl_time: "",
			// checked: false,
        }
    },
	
    methods: {
		
      	...mapActions(['Login', 'Logout', 'PhoneLogin', 'zjlogin', 'ZjUserYzmLogin', 'TjdwUserLogin']),
      	handleTabClick (key) {
			this.customActiveKey = key
			// this.form.resetFields()
      	},
      	handleUsernameOrEmail (rule, value, callback) {
			const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
			if (regex.test(value)) {
				this.loginType = 0
			} else {
				this.loginType = 1
			}
			callback()
      	},
		inputCodeChange(e){
			this.inputCodeContent = e.target.value
		},
		
      	handleChangeCheckCode(){
			this.currdatetime = new Date().getTime();
			getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
				if(res.success){
					this.randCodeImage = res.result
					this.requestCodeSuccess=true
				}else{
					this.$message.error(res.message)
					this.requestCodeSuccess=false
				}
			}).catch(()=>{
				this.requestCodeSuccess=false
			})
      	},
        change1(){
            if (this.loginType == 'username') {
                this.loginType = 'phone'
            } else {
                this.loginType = 'username'
            }
            return this.loginType;
        },
		
		getCaptcha (e) {
			e.preventDefault();
			let that = this;
			this.form.validateFields([ 'mobile' ], { force: true },(err,values) => {
				if(!values.mobile){
					that.cmsFailed("请输入手机号");
				} else if (!err) {
					this.state.smsSendBtn = true;
					let interval = window.setInterval(() => {
						if (that.state.time-- <= 0) {
							that.state.time = 60;
							that.state.smsSendBtn = false;
							window.clearInterval(interval);
						}
					}, 1000);
					const hide = this.$message.loading('验证码发送中..', 0);
					let smsParams = {};
					console.log(values.inputCode)
					smsParams.phoneNumber=values.mobile;
					smsParams.code=that.inputCodeContent;
					smsParams.key=that.currdatetime;
					smsParams.type="5";
					// smsParams.smsmode="0";
					// postAction("/sys/sms",smsParams)
					getAction("/cxj/sysCxjUser/cxjsb_getYzm",smsParams)
					.then(res => {
					if(!res.success){
						setTimeout(hide, 0);
						this.cmsFailed(res.message);
					}
					console.log(res);
					setTimeout(hide, 500);})
					.catch(err => {
						setTimeout(hide, 1);
						clearInterval(interval);
						that.state.time = 60;
						that.state.smsSendBtn = false;
						this.requestFailed(err);
					});
				}
			});
		},

		
      	getRouterData(){
			this.$nextTick(() => {
				if (this.$route.params.username) {
					this.form.setFieldsValue({
						'username': this.$route.params.username
					});
				}
			})
		},

		
		handleSubmit () {
			let that = this
			let loginParams = {};
			that.loginBtn = true;
			// 专家登录
			if (that.customActiveKey === 'tab1') {
				if (that.loginType == 'phone') {
					that.form.validateFields([ 'mobile', 'captcha','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
						if (!err) {
							loginParams.remember_me = values.rememberMe
							loginParams.key = that.currdatetime
							loginParams.phoneNumber = values.mobile
							loginParams.code = values.captcha
							console.log("登录参数",loginParams)
							that.ZjUserYzmLogin(loginParams).then((res) => {
								sessionStorage.setItem('role', 3)
								this.$refs.loginSelect.show(res.result)
							}).catch((err) => {
								that.requestFailed(err);
							});
						} else {
							that.loginBtn = false;
						}
					})
				} else {
					that.form.validateFields([ 'username_zj', 'password_zj','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
						if (!err) {
							loginParams.userName = values.username_zj
							// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
							//loginParams.password = md5(values.password)
							//loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
							loginParams.passWord = values.password_zj
							loginParams.remember_me = values.rememberMe
							// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
							loginParams.code = that.inputCodeContent
							loginParams.key = that.currdatetime
							console.log("登录参数",loginParams)
							that.zjlogin(loginParams).then((res) => {
								sessionStorage.setItem('role', 3)
								this.$refs.loginSelect.show(res.result)
							}).catch((err) => {
								that.requestFailed(err);
							});
						} else {
							that.loginBtn = false;
						}
					})
				}
			// 集团推荐单位登录
			} else if (that.customActiveKey === 'tab2') {
				that.form.validateFields([ 'username', 'password','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
					if (!err) {
						loginParams.userName = values.username
						// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
						//loginParams.password = md5(values.password)
						//loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
						loginParams.passWord = values.password
						loginParams.remember_me = values.rememberMe
						// update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
						loginParams.code = that.inputCodeContent
						loginParams.key = that.currdatetime
						console.log("登录参数",loginParams)
						that.TjdwUserLogin(loginParams).then((res) => {
                            sessionStorage.setItem('role', 1)
							this.$refs.loginSelect.show(res.result)
						}).catch((err) => {
							that.requestFailed(err);
						});
					} else {
						that.loginBtn = false;
					}
				})
			} else {
				console.log(that.customActiveKey,12323423232)
				that.form.validateFields([ 'mobile', 'captcha', 'rememberMe' ], { force: true }, (err, values) => {
					if (!err) {
						loginParams.mobile = values.mobile
						loginParams.captcha = values.captcha
						loginParams.remember_me = values.rememberMe
						that.PhoneLogin(loginParams).then((res) => {
							console.log(res.result);
							this.$refs.loginSelect.show(res.result)
						}).catch((err) => {
							that.requestFailed(err);
						})
					}
				})
			}
		},
		
		loginSelectOk(){
			this.loginSuccess()
      	},
		  
      	loginSuccess () {
			console.log('9090909009')
			sessionStorage.setItem('loginSource', 1)
			this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
				console.log('登录跳转首页出错,这个错误从哪里来的')
			})
			this.$notification.success({
				message: '欢迎',
				description: `${timeFix()}，欢迎回来`,
			});
      	},
      	requestFailed (err) {
			this.$notification[ 'error' ]({
				message: '登录失败',
				description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
				duration: 4,
			});
			this.loginBtn = false;
      	},
	}
}
</script>
<style lang="less">
	.valid-error .ant-select-selection__placeholder{
		color: #f5222d;
	}
	.ant-tabs-nav .ant-tabs-tab {
		margin: 0;
	}
  	.main_tabs.expert_tab {
		.ant-tabs-nav {
			width:100%;
			>div {
				display: flex;
				align-items: center;
			}
			.ant-tabs-tab {
				font-size: 20px;
			}
		}
		.ant-input-lg {
			font-size: 20px;
			height: 50px;
		}
		.ant-form-item-children {
			display:block;
			height: 50px;
		}
  	}
	button.login-button {
		span {
			font-size: 22px;
			color:#fff;
		}
	}
</style>
<style lang="less" scoped>
	.home {
		width: 100%;
		background: #F7F7F7;
	}
  	.user-layout-login {
		label {
		font-size: 14px;
		}

		.getCaptcha {
		height: 44px;
		border: none;
		cursor: pointer;
		position: absolute;
		right: 3px;
		top: 3px;
		color: #006DC0;
		font-size: 18px;
		}
		.getCaptcha[disabled] {
			color: #d9d9d9;
		}

		.forge-password {
		font-size: 20px;
		}

		button.login-button {
		// padding: 0 15px;
		// font-size: 16px;
		// height: 40px;
		// line-height: 40px;
		// width: 100%;
		// margin:0;
		width: 434px;
		height: 54px;
		background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
		border-radius: 5px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
		}

		.user-login-other {
			text-align: left;
			margin-top: 24px;
			line-height: 22px;

			.item-icon {
				font-size: 24px;
				color: rgba(0,0,0,.2);
				margin-left: 16px;
				vertical-align: middle;
				cursor: pointer;
				transition: color .3s;

				&:hover {
					color: #1890ff;
				}
			}
		}
  	}
	.codeimg {
		width: 100%;
		cursor: pointer;
	}
	.main {
		padding-top: 20px;
		width: 1220px;
		margin: 0 auto;
		display:flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 20px;
	}
	.main_right {
		width: 506px;
		margin: 0 auto;
		.main_right_cont {
			width: 506px;
			background: #FFFFFF;
			&.main_right_cont_login {
				height: 536px;
				padding: 0 36px;
				box-sizing: border-box;
			}
			&.main_right_cont_enter {
				height: 536px;
				padding: 0 31px 0 37px;
				box-sizing: border-box;
			}
			&.main_right_cont_set {
				height: 220px;
				margin-top: 20px;
			}
		}
		.login_header {
			padding-top: 20px;
			display: flex;
			justify-content: space-between;
			position: relative;
		}
		/deep/ .ant-tabs-tab {
			font-size: 20px;
		}
	}


</style>
